<template>
  <div class="theme-canvas flex items-center justify-center z-10" v-if="visible">
    <a-card
      class="wrapper xl:w-[90%] xl:h-[95%] sm:w-[98%] sm:h-[98%]"
      :body-style="{ padding: '1rem', paddingTop: '0', height: '100%' }"
    >
      <ThemeHead @close="visible = !visible" />

      <div class="main flex gap-2">
        <ThemeSidebar />
        <div class="flex-1 relative">
          <a-card
            :bordered="false"
            :body-style="{ padding: 0 }"
            class="absolute top-4 w-[90%] head z-10 left-[5%]"
          >
            <div class="w-full h-full px-8 flex justify-between items-center">
              <div class="font-bold text-[1.5rem]">LCD下发</div>
              <a-button type="primary" @click="send">保存</a-button>
            </div>
          </a-card>
          <ThemeEditor
            v-model:value="currentComponent"
            v-model:scale="currentTheme.scale"
            :data="currentTheme.image"
            :width="currentTheme.width!"
            :height="currentTheme.height!"
            :background="currentTheme.background"
            @select="selectItem"
            @click-stage="clickStage"
            edit
          ></ThemeEditor>
        </div>

        <ThemeConfig @update="update" ref="themRef" />
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import type { LcdTheme } from '@/api/modules/lcd/theme';
import ThemeSidebar from './sidebar/ThemeSidebar.vue';
import ThemeConfig from './config/ThemeConfig.vue';
import ThemeHead from './head/ThemeHead.vue';
import { currentTheme, currentComponent, themeTab } from './data/data';

const emit = defineEmits(['update']);
const visible = defineModel('visible');
const themRef = ref();
const update = () => {
  visible.value = false;
  emit('update');
};
const props = defineProps<{
  data: LcdTheme;
}>();

currentTheme.value = props.data;
const send = () => {
  themRef.value?.submit();
};
const selectItem = () => {
  themeTab.value = 'layer';
};
const clickStage = () => {
  themeTab.value = 'canvas';
};
watch(
  props,
  () => {
    currentTheme.value = props.data;
  },
  { deep: true, immediate: true },
);
</script>

<style lang="scss" scoped>
.theme-canvas {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: var(--opacity-background);
  top: 0;
  left: 0;
}
.main {
  height: calc(100% - 42px);
}
.head {
  line-height: 48px;
  height: 48px;
  border-radius: 24px !important;
}
</style>
